<template>
    <div>
        <back-head title="虚拟充值订单列表"></back-head>
        <!-- 搜索条件 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>筛选查询</span>
            </div>
            <el-form :inline="true" :model="searchData" ref="ruleForm" label-width="90px" :rules="rules">
                <el-form-item label="订单编号：" prop="orderNo">
                    <el-input 
                        v-model="searchData.orderNo"
                        placeholder="请输入订单编号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="商品编号：" prop="goodsId">
                    <el-input 
                        v-model="searchData.goodsId"
                        placeholder="请输入商品编号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="渠道：" prop="channel">
                    <el-select v-model="searchData.channel" style="width: 130px;margin-right: 5px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                            v-for="(val, key) in searchData.channelList"
                            :key="key"
                            :label="val"
                            :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单所属：" prop="belong">
                    <el-select v-model="searchData.belong" style="width: 130px;margin-right: 5px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                            v-for="(val, key) in searchData.belongList"
                            :key="key"
                            :label="val"
                            :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态：" prop="status">
                    <el-select v-model="searchData.status" style="width: 130px;margin-right: 5px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                            v-for="(val, key) in searchData.orderStatusList"
                            :key="key"
                            :label="val"
                            :value="key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    <el-date-picker
                        v-model="searchData.createTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="searchData.pickerOptions"
                        class="datetimerange"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态更新时间：" prop="updateTime" label-width="110px">
                    <el-date-picker
                        v-model="searchData.updateTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="searchData.pickerOptions"
                        class="datetimerange"
                        >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 数据列表 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据列表</span>
            </div>
            <el-row>
                <el-table
                    ref="list"
                    border
                    :data="dataList"
                    highlight-current-row
                    style="width: 100%;">
                    <el-table-column
                        property="orderNo"
                        label="订单编号">
                    </el-table-column>
                    <el-table-column
                        property="goodsId"
                        label="商品编号">
                    </el-table-column>
                    <el-table-column
                        label="渠道">
                        <template slot-scope="scope">
                            {{searchData.channelList[scope.row.channel] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="订单所属">
                        <template slot-scope="scope">
                            {{searchData.belongList[scope.row.belong] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="订单金额">
                        <template slot-scope="scope">
                            ￥{{scope.row.fillMoney | toFixed2}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="订单状态">
                        <template slot-scope="scope">
                            {{searchData.orderStatusList[scope.row.status] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="创建时间"
                        width="180">
                        <template slot-scope="scope">
                            {{scope.row.createTime | formatDate}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态更新时间"
                        width="180">
                        <template slot-scope="scope">
                            {{scope.row.updateTime | formatDate}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>

        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>
    </div>
</template>

<script>        
    export default {
        name: 'orderList',
        data() {
            let checkNum = (rule, value, callback)=>{
                if(value ==''){
                    callback();
                }
                if(!this.util.RegExpr.checkNum(value)){
                    callback(new Error('此字段只支持数字'));
                }else{
                    callback();
                }
            };
            return {
                rules:{
                    orderNo: [
                        { validator: checkNum, trigger: 'blur', require : false}
                    ],
                    goodsId: [
                        { validator: checkNum, trigger: 'blur', require : false}
                    ]
                },
                searchData : {
                    orderNo: '',
                    goodsId: '',
                    channel: '',
                    channelList: {
                        1 : '追电',
                        2 : '亿美商城'
                    },
                    belong: '',
                    belongList: {
                        1 : '欧飞',
                        2 : '拉卡拉',
                        3 : '雪虎'
                    },
                    status: '',
                    orderStatusList: {
                        1 : '处理中',
                        2 : '充值成功',
                        4 : '充值失败'
                    },
                    createTime: '',
                    updateTime: '',
                    pickerOptions: {
                        disabledDate: (time)=>{
                            return time.getTime() > Date.now();
                        }
                    }
                },
                dataList : [],    //list数据
                current : 1,  //当前页码
                pageSize : Number(localStorage.getItem('pageSize')),
                total : 0
            }
        },
        computed: {
            createStartTime(){
                if(this.searchData.createTime instanceof Array){
                    return this.searchData.createTime[0];
                }
                    
            },
            createEndTime(){
                if(this.searchData.createTime instanceof Array){
                    return this.searchData.createTime[1];
                }
            },
            updateStartTime(){
                if(this.searchData.updateTime instanceof Array){
                    return this.searchData.updateTime[0];
                }
            },
            updateEndTime(){
                if(this.searchData.updateTime instanceof Array){
                    return this.searchData.updateTime[1];
                }
            }
        },
        created(){
            
        },
        mounted(){
            this.getData();  //获取列表数据
        },
        methods: {
            resetForm(formName){
                this.$refs[formName].resetFields();
                this.getData();
            },
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.getData();
                    } else {
                        return false;
                    }
                });
            },
            checkDetail(data){
                this.$router.push({ path: '/goodsPoolDetail', query: { id: data }})
            },
            getData(){
                this.$axios
                    .post("/admin/virtualOrders/queryList.json",{
                        orderNo: this.searchData.orderNo,
                        goodsId: this.searchData.goodsId,
                        channel: this.searchData.channel,
                        orderBelong: this.searchData.belong,
                        orderStatus: this.searchData.status,
                        createStartTime: this.createStartTime,
                        createEndTime: this.createEndTime,
                        updateStartTime: this.updateStartTime,
                        updateEndTime: this.updateEndTime,
                        pageNo: this.current,
                        pageSize: this.pageSize
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.dataList = data.list;
                            
                            if(data.pageInfo){
                                //获取分页信息
                                this.current = data.pageInfo.pageIndex;
                                this.total = data.pageInfo.recordCount;
                            }
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
                
            }
        }
    }

</script>


<style scoped>
    .orange{
        color: #ff9800;
    }
</style>
